<template>
	<div class="notFound">
		<img src="../assets/images/404.jpg" />

		<div class="backTime">
			<span style="color: #1e9fff">{{ time }}</span>
			&nbsp;秒后返回首页
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import router from '@/router'

export default defineComponent({
	name: 'NotFound',

	setup() {
		onMounted(() => {
			setBackTime()
		})

		const time = ref(3)

		// 设置返回首页的时间
		const setBackTime = () => {
			let t = 3
			let timer = setInterval(() => {
				if (t > 0) {
					t = t - 1
				}

				if (t <= 0) {
					t = 0

					// 关闭定时器
					clearInterval(timer)

					// 回到上一页
					router.push('/')
				}

				time.value = t
			}, 1000)
		}

		return {
			time,
			setBackTime
		}
	}
})
</script>

<style scoped>
.notFound {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: #f4f5f7;
}

.notFound > img {
	display: block;
	margin: 50px auto 0 auto;
}

.notFound .backTime {
	text-align: center;
	line-height: 30px;
}
</style>
